<%--
  Created by IntelliJ IDEA.
  User: zhang_yao_wu1993
  Date: 15/4/21
  Time: 下午4:34
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="/Other/Lib/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/Other/Lib/ParticleGround/jquery.particleground.min.js"></script>
    <link rel="stylesheet" href="/Other/Lib/ParticleGround/jquery.particleground.css"/>
    <script type="text/javascript" src="/Other/Lib/SemanticUI/dist/semantic.min.js"></script>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/step.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/form.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/button.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/input.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/segment.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/icon.min.css"/>
    <link rel="stylesheet" href="/Other/Lib/SemanticUI/dist/components/label.min.css"/>
    <script type="text/javascript" src="/Other/JavaScript/blog_Register.js"></script>
    <link rel="stylesheet" href="/Other/StyleSheet/blog_Register.css"/>
</head>
<body>
<div id="particles">
    <%-- step_bar --%>
    <div id="step_bar">
        <div class="ui ordered steps">
            <div class="active step">
                <div class="content">
                    <div class="title">填写信息</div>
                    <div class="description">Fill in the information</div>
                </div>
            </div>
            <div class="active step">
                <div class="content">
                    <div class="title">注册成功</div>
                    <div class="description">Successful registration</div>
                </div>
            </div>
            <div class="active step">
                <div class="content">
                    <div class="title">完善信息</div>
                    <div class="description">Perfect information</div>
                </div>
            </div>
        </div>
    </div>
    <%-- end step_bar --%>
    <%-- register_box --%>
    <div id="register_box" class="ui large form segment">
        <form action="/Register" method="post">
            <div class="ui vertical segment">
                <div class="ui left icon input labeled">
                    <input type="text" placeholder="请输入用户名 ..." maxlength="26" name="username">
                    <i class="user icon"></i>
                    <div class="ui tag label">
                        <i class="remove circle icon"></i>
                    </div>
                </div>
            </div>
            <div class="ui vertical segment">
                <div class="ui left icon input labeled">
                    <input type="password" placeholder="请输入密码 ..." maxlength="26" name="password">
                    <i class="unlock alternate icon"></i>
                    <div class="ui tag label">
                        <i class="remove circle icon"></i>
                    </div>
                </div>
            </div>
            <div class="ui vertical segment">
                <div class="ui left icon input labeled">
                    <input type="password" placeholder="请确认密码 ..." maxlength="26" name="password_confirm">
                    <i class="unlock alternate icon"></i>
                    <div class="ui tag label">
                        <i class="remove circle icon"></i>
                    </div>
                </div>
            </div>
            <div class="ui vertical segment">
                <div class="ui left icon input labeled">
                    <input type="text" placeholder="请输入昵称 ..." maxlength="26" name="nickname">
                    <i class="user icon"></i>
                    <div class="ui tag label">
                        <i class="remove circle icon"></i>
                    </div>
                </div>
            </div>
            <div class="ui vertical segment">
                <div class="ui left icon input labeled">
                    <input type="text" placeholder="请输入 QQ 号 ..." maxlength="17" name="qq">
                    <i class="qq icon"></i>
                    <div class="ui tag label">
                        <i class="remove circle icon"></i>
                    </div>
                </div>
            </div>
            <div class="ui vertical segment">
                <div class="ui left icon input labeled">
                    <input type="text" placeholder="请输入 E-mail 地址 ..." maxlength="42" name="email">
                    <i class="mail icon"></i>
                    <div class="ui tag label">
                        <i class="remove circle icon"></i>
                    </div>
                </div>
            </div>
            <div class="ui vertical segment">
                <div id="submit_button" class="ui basic button disabled">
                    <i class="add user icon"></i>
                    注册
                </div>
                <a href="/MainPage">
                    <div class="ui basic button">
                        <i class="home icon"></i>
                        返回首页
                    </div>
                </a>
            </div>
            <input type="hidden"
                   name="${_csrf.parameterName}"
                   value="${_csrf.token}"/>
        </form>
    </div>
    <%-- end register_box --%>
</div>
</body>
</html>